import { Suspense, lazy } from "react";
import {Layout } from "antd";
import '../assets/css/index.css'
import { Route, Routes, Navigate, useNavigate } from 'react-router-dom'
// 引入封装好得多菜单导航
import VNav from '../components/Nav'
// 路由懒加载
const Home = lazy(() => import('../views/home'))
const List = lazy(() => import('../views/menu/menu'))
const Cate = lazy(() => import('../views/cate/cate'))
const { Header, Footer, Sider, Content } = Layout;
function Index() {

    return (
        <div className="index">
            <Layout>
                <Header className="header">XXX大型后台管理系统</Header>
                <Layout>
                    <Sider width={256}>
                        <VNav />
                    </Sider>
                    <Content>
                        <Suspense>
                            {/* 二级路由出口 */}
                            <Routes>
                                <Route path='home' element={<Home />}></Route>
                                <Route path="menu" element={<List />}></Route>
                                <Route path="cate" element={<Cate />}></Route>
                                {/* 二级路由重定向 */}
                                <Route path='' element={<Navigate to='home' />}></Route>
                            </Routes>
                        </Suspense>
                    </Content>
                </Layout>
            </Layout>
        </div>
    );
}
export default Index;
